<script setup>

import { computed,ref, watch } from 'vue';


let todo=ref('')
let filterString=ref('all')

let isErr= computed(()=>{
  let tem = todo.value.trim();
  return tem.length >50 || tem.length <0
})

let arr = computed(()=>{
  if (filterString.value === 'all') {
    return todoList.value
  }
  if (filterString.value === 'unDone') {
    return todoList.value.filter(item => !item.status)
  }
  if (filterString.value === 'done') {
    return todoList.value.filter(item =>item.status)
  }
})
let todoList = ref([])



function todoAdd() {



  if (isErr.value) {
    return
  }

  let tmpObj = {
    content: todo.value,
    status: false
  }

  todoList.value.push(tmpObj);

  todo.value = ''

}
function btnDel(idx) {
  console.log(idx);
  todoList.value.splice(idx, 1)
}

function btnAll() {
  console.log('所有的事项');
  filterString.value = 'all'
}

function btnUnDone() {
  console.log('未完成');
  filterString.value = 'unDone'
}

function btnDone() {
  console.log('完成');
  filterString.value = 'done'

}


</script>

<template>
<div class="add">
  <div class="box">
  <div class="project">
    <h1>代办事项</h1>
  </div>
  <div class="head"> <input class="lel" type="text" placeholder="请输入您的代办事项，回车后即可添加" v-model="todo" @change.keyup.enter="todoAdd"></div>
  <span v-show="isErr">最多50个字</span>
  <div class="centre cc">
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <div class="chk">
          <input type="checkbox" v-model="item.status">
        <span class="tdtx">
          {{ item.content }}
        </span>
        </div>
        <div>
          <input class="btndel" type="button" value="删除" @click="btnDel(index)">
        </div>
       
      </li>
    </ul>
  </div>
  <div class="trail">
    <div class="letf"><span class="aaa">总计：{{ todoList.length }}</span></div>
    <div class="right">
      <input type="button" value="全部" @click="btnAll">
      <input type="button" value="未完成" @click="btnUnDone">
      <input type="button" value="已完成" @click="btnDone">
    </div>
  </div>
 </div>
</div>
</template>

<style scoped>
*{
  margin: 0px;
  padding: 0px;
}
.box{

  width: 800px;
  height: 500px;
  background-color: #eee;
  display: flex;
  flex-direction: column;
  

}
.project,
.head,
.trail{
  height: 50px;
}
.add{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.head{
  display: flex;
}
.aaa{
  display: inline-block;
  height: 50px;
  line-height: 50px;
  margin-left: 15px;
}
.lel{
  flex: 1;
  border-radius: 5px;

}
.cc{
  flex: 1;
}
.right{
  display: flex;
}
.trail{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
input[type=Button] {
  margin: 5px;
  border: none;
  background-color: transparent;
}
.project{
  display: flex;
  justify-content: center;
}

li{
  cursor: pointer;
  display: flex;
  justify-content: space-bestween;
  margin-left: 10px;
  padding: 10px;
}
.tdtx{
  padding-left: 10xp;
  flex: 1;

}
ul{
  list-style: none;
  padding: 0;
  text-align: left;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 10px;
}
.chk{
  flex: 1;
  align-items: center;
}
.btndel{
  display: nones;
  
}
.centre li:hover .btndel {
  display: inline;
}

.chk input[type=checkbox]:checked+span {
  text-decoration: line-through;
}

</style>
